<template>
  <div id="login">
    <div class="form">
      <input type="text" placeholder="用户名" v-model="uname" class="input" />
      <br />
      <input
        type="password"
        placeholder="密码"
        v-model="password"
        class="input"
      /><br />
      <input type="text" placeholder="验证码" v-model="code" class="code" />
      <img :src="src" id="img" @click="click_code" /> <br />
      <button id="dl" class="button" v-if="!ins" @click="click_dl">登录</button>
      <button id="zc" class="button" v-if="ins" @click="click_zc">注册</button>
      <br />
      <span v-if="!ins"
        >没有账号?赶快
        <p class="fonts" @click="ins = !ins">注册</p>
        吧!</span
      >
      <span v-if="ins"
        >前往
        <p class="fonts" @click="ins = !ins">登录</p></span
      >
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VueCookies from "vue-cookies";
export default {
  methods: {
    // 登录点击
    click_dl() {
      if (this.uname.trim() != "" && this.password.trim() != "") {
        if (this.code != "") {
          // 先判断验证码是否正确
          axios.get("http://localhost:8081/lo/code?code=" + this.code).then(
            (response) => {
              if (response.data.code == "0") {
                this.click_code();
                alert("验证码错误");
                return;
              } else {
                // 判断登录用户
                axios
                  .get(
                    "http://localhost:8081/lo/user/login?uname=" +
                      this.uname.trim() +
                      "&password=" +
                      this.password.trim()
                  )
                  .then(
                    (response) => {
                      if (response.data == null) {
                        this.click_code();
                        alert("密码或用户名错误！");
                      } else {
                        this.$emit("setPoint");
                        console.log("调用");
                        VueCookies.set("uid", response.data.uid); //存cookie,60秒
                        VueCookies.set("ucookie", response.data.ucookie); //用户的cookie值，用于判断是否登陆
                        VueCookies.set("uname", response.data.uname); //存cookie,60秒
                        // console.log(response.data);
                        this.$emit("getListData", "最新发布"); // 请求更新lisdata数据
                      }
                    },
                    (error) => {
                      alert("请求失败,请检查服务器是否开启！");
                    }
                  );
              }
            },
            (error) => {
              alert("请求失败,请检查服务器是否开启！");
            }
          );
        } else {
          alert("请输入验证码！");
        }
      } else {
        alert("请输入用户名与密码！");
        this.click_code();
      }
    },
    // 注册点击
    click_zc() {
      if (this.uname.trim() != "" && this.password.trim() != "") {
        if (this.code != "") {
          // 先判断验证码是否正确
          axios.get("http://localhost:8081/lo/code?code=" + this.code).then(
            (response) => {
              if (response.data.code == "0") {
                this.click_code();
                alert("验证码错误!");
                return;
              } else {
                // 进行注册用户
                axios
                  .get(
                    "http://localhost:8081/lo/user/registered?uname=" +
                      this.uname.trim() +
                      "&password=" +
                      this.password.trim()
                  )
                  .then(
                    (response) => {
                      if (response.data.registered == 0) {
                        alert("用户名被注册！");
                        this.click_code();
                      } else {
                        alert("注册成功去登陆！");
                        this.ins = !this.ins; // 注册成功切换按钮
                        this.uname = ""; // 下面更新数据
                        this.password = "";
                        this.code = "";
                        this.click_code();
                      }
                    },
                    (error) => {
                      alert("请求失败,请检查服务器是否开启！");
                    }
                  );
              }
            },
            (error) => {
              alert("请求失败,请检查服务器是否开启！");
            }
          );
        } else {
          alert("请输入验证码！");
        }
      } else {
        this.click_code();
        alert("请输入用户名与密码！");
      }
    },
    // 更新验证码
    click_code() {
      // 修改src就会重新获取数据，如果src不变就不会获取
      this.src = "http://localhost:8081/lo/getCode?" + new Date().getTime();
    },
  },
  data() {
    return {
      ins: 0, // 切换登录与注册
      uname: "",
      password: "",
      code: "",
      src: "http://localhost:8081/lo/getCode?" + new Date().getTime(),
    };
  },
};
</script>

<style scoped>
#login {
  width: 350px;
  height: 400px;
  background-image: url(../assets/login.png);
  background-size: 350px 400px;
  text-align: center;
  position: fixed;
  top: 150px;
  left: 40%;
  border: 1px solid #000;
  z-index: 10;
}

.form {
  margin-top: 150px;
}

.form .input {
  width: 80%;
  height: 40px;
  margin-bottom: 10px;
  border: 0px;
  border-bottom: 1px solid #000;
}
.form .code {
  width: 28%;
  height: 40px;
  font-size: 16px;
  padding-left: 5px;
  margin-top: 5px;
}

.form #img {
  display: inline-block;
  width: 100px;
  height: 43px;
  margin-left: 65px;
  vertical-align: bottom; /*调整对齐线*/
  /* border: 1px solid #000; */
}

.form .button {
  width: 40%;
  height: 35px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.form .fonts {
  display: inline;
  color: rgb(240, 8, 8);
  cursor: pointer; /* 经过有手指*/
}
</style>